// 1. 获取到所有的 li和 main
var lis = document.getElementsByClassName('tab')
var mains = document.getElementsByClassName('main')

// 2. 循环 li集合，绑定单击事件
// 排它思想，先清除所有li的active类名
// 给当前li加类名，改变字体颜色
// 派他思想，先清除所有main的selected类名
// 让对应的main加类名： display:block
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        for (var j = 0; j < lis.length; j++) {
            lis[j].classList.remove('active')
        }
        lis[i].classList.add('active')

        for (var k = 0; k < mains.length; k++) {
            mains[k].classList.remove('selected')
        }
        mains[i].classList.add("selected")
    }
}
